<template>
  <view class="container">
    <view style="margin-top: 15px">
      <u-notice-bar mode="closable" :text="text1"></u-notice-bar>
    </view>
    <!-- 服务详情图 -->

    <view class="avatar">
      <span>服务详情图</span>

      <!-- 上传组件 -->
      <u-upload
        name="product_img"
        :maxCount="6"
        :fileList="filelist2"
        width="100"
        height="100"
        @delete="del2"
        @afterRead="read2"
      />
    </view>

    <!-- 长途=图 -->
    <view class="avatar">
      <span>上传长图服务产品显在列表:</span>

      <!-- 上传组件 -->
      <u-upload
        name="product_img"
        :maxCount="1"
        :fileList="filelist"
        width="100"
        height="100"
        @delete="del"
        @afterRead="read"
      />
    </view>

    <!-- 方图 -->
    <view class="avatar">
      <span>首页服务图方图:</span>

      <!-- 上传组件 -->
      <u-upload
        name="product_img"
        :maxCount="1"
        :fileList="filelist1"
        width="100"
        height="100"
        @delete="del1"
        @afterRead="read1"
      />
    </view>

    <view class="content">
      <u-form
        labelPosition="left"
        labelWidth="60"
        :model="service"
        :rules="rules"
        ref="product"
      >
        <!-- 部门 -->
        <u-form-item
          label="门店"
          prop="store.name"
          borderBottom
          @click="showstore = true"
        >
          <u-input
            v-model="service.store.name"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择所属门店"
            border="none"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item label="推荐栏" borderBottom @click="showsellcolumn = true">
          <u-input
            v-model="service.sellcolumn_text"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择是否推荐"
            border="none"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <!-- 品牌 -->
        <u-form-item
          label="类型"
          prop="type_text"
          borderBottom
          @click="showtype = true"
        >
          <u-input
            v-model="service.type_text"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择服务类型"
            border="none"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item
          label="会员套餐"
          prop="type_text"
          borderBottom
          @click="showlevel = true"
        >
          <u-input
            v-model="service.level.name"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择会员套餐"
            border="none"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <!-- 名称 -->
        <u-form-item label="标题" prop="title">
          <u-input
            v-model="service.title"
            ref="title"
            placeholder="请输入商品名称"
          />
        </u-form-item>

        <!-- 商品描述 -->
        <u-form-item label="简介" prop="content" borderBottom>
          <u-textarea
            placeholder="不低于3个字"
            v-model="service.content"
            count
          ></u-textarea>
        </u-form-item>

        <!-- 参数3 -->
        <u-form-item label="创建时间" prop="createtime_text">
          <u-input
            v-model="service.createtime_text"
            placeholder="创建时间不能为空"
          />
        </u-form-item>
        <!-- 全款 -->
        <u-form-item label="服务费用" prop="free">
          <u-input v-model="service.free" placeholder="请填写服务费用" />
        </u-form-item>
        <u-form-item
          label="会员价"
          
        >
          <u-input
            min="0.00"
            v-model="service.levelprice"
            placeholder="请输入会员价格"
          />
        </u-form-item>
       

      
        <u-popup :show="showstore" @close="closestore" @open="openstore">
          <view>
            <u-list height="560px">
              <u-list-item v-for="(item, index) in stolist" :key="index">
                <view class="branktypename" @click="storeSelect(item)">
                  <u-cell :title="item.name"> </u-cell>
                </view>
              </u-list-item>
            </u-list>
          </view>
        </u-popup>

        <u-popup :show="showtype" @close="closetype" @open="opentype">
          <view>
            <u-list height="560px">
              <u-list-item v-for="(item, index) in typelist" :key="index">
                <view class="branktypename" @click="typeSelect(item)">
                  <u-cell :title="item.name"> </u-cell>
                </view>
              </u-list-item>
            </u-list>
          </view>
        </u-popup>
        <u-popup :show="showlevel" @close="closelevel" @open="openlevel">
          <view>
            <u-list height="560px">
              <u-list-item v-for="(item, index) in leveldata" :key="index">
                <view class="branktypename" @click="levelSelect(item)">
                  <u-cell :title="item.name"> </u-cell>
                </view>
              </u-list-item>
            </u-list>
          </view>
        </u-popup>

        <u-action-sheet
          :show="showsellcolumn"
          :actions="sellcolumnlist"
          title="请选择是否为推荐"
          @close="showsellcolumn = false"
          @select="sellcolumnSelect()"
        />
        <!-- 提交按钮 -->
        <u-button
          text="修改服务"
          icon="pushpin"
          size="small"
          type="success"
          :customStyle="btnStyle"
          @click="product"
        />
      </u-form>
    </view>
    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>
  </view>
</template>
  
<script>
export default {
  onLoad(options) {
    this.auth = this.$u.auth.check();
    this.serid = options.serid ? options.serid : 0;
    this.typeid = options.typeid ? options.typeid : 0;
    this.storelist();

    this.list();
    this.typedata();
    this.getlevelindex();
  },

  onReady() {
    this.$refs.product.setRules(this.rules);
  },
  created() {
    this.timer = setInterval(() => {
      let a = this.$u.count.check();
    }, 15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  data() {
    return {
      filelist: [],
      showlevel: false,
      filelist1: [],
      filelist2: [],
      typeid:0,
      newthumbArr: [],
      leveldata: [],
      showstore: false,
      text1: "注意: 员工提成比率不能大于1(100%)，分配的提成不能超出金总额，",
      showsellcolumn: false,
      auth: {},
      vediolist: [],
      serid: 0,
      store_text: "",
      stoid: null,
      stolist: [],
      sellcolumnlist: [
        {
          sellcolumn: 0,
          name: "正常",
        },
        {
          sellcolumn: 1,
          name: "推荐",
        },
      ],
      thumbs_text: "",
      name: "",
      service: {
        level:{},
        store:{}
      },
      piclist: [],
      content: "",
      typelist: [],
      showtype: false,
      free: 0,

      rules: {
        content: {
          required: true,
          message: "不低于3个字",
          trigger: ["change"],
        },
        "store.name": {
          required: true,
          message: "请选择你所属的门店",
          trigger: ["blur", "change"],
        },
        type_text: {
          required: true,
          message: "请选择服务类型",
          trigger: ["blur", "change"],
        },
        title: {
          required: true,
          message: "请填写服务标题",
          trigger: ["blur", "change"],
        },

        createtime_text: {
          required: true,
          message: "创建时间不能为空",
          trigger: ["blur", "change"],
        },
        free: {
          required: true,
          message: "服务费用不能为空",
          trigger: ["blur", "change"],
        },
       

      },
    };
  },
  computed: {
    //提成计算
    levelprice() {
       let levelprice =  this.service.free * this.service.level.zhekou

       this.service.levelprice = levelprice.toFixed(2)
       
      }
    },
  
  methods: {
    async read(event) {
      //组装上传数据
      var data = {
        filePath: event.file.thumb,
        name: "product_img",
        header: {},
      };

      //调用接口
      var result = await this.$u.api.product.thumbs(data);

      if (result.code) {
        this.service.image_text = result.data;
        // 合并对象
        this.filelist = [{ url: result.data }];
        this.newthumbArr = this.newthumbArr.concat(result.data);

        return false;
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },
    async read2(event) {
      //组装上传数据
      var data = {
        filePath: event.file.thumb,
        name: "product_img",
        header: {},
      };

      //调用接口
      var result = await this.$u.api.product.thumbs(data);

      if (result.code) {
        // 合并对象
        this.filelist2 = this.filelist2.concat({ url: result.data });
        this.newthumbArr = this.newthumbArr.concat(result.data);

        let userArray = Object.entries(this.filelist2).map(([key, value]) => {
          return { value };
        });

        userArray.forEach((item) => {
          // 截取想要部分路径

          // 把想要的路径追加到数组
          this.piclist.push(item.value.url);
        });
        // 数组的去重
        let qcarr = [...new Set(this.piclist)];

        // 数组转化成字符串
        this.service.imagelist = qcarr.join(",");
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },
    openstore() {
      this.showstore = true;
    },
    closestore() {
      this.showstore = false;
      // console.log('close');
    },
    closelevel() {
      this.showlevel = false;
    },
    openlevel() {
      this.showlevel = true;
    },
    async read1(event) {
      //组装上传数据
      var data = {
        filePath: event.file.thumb,
        name: "product_img",
        header: {},
      };

      //调用接口
      var result = await this.$u.api.product.thumbs(data);

      if (result.code) {
        this.service.Squareimage_text = result.data;
        // 合并对象
        this.filelist1 = [{ url: result.data }];
        this.newthumbArr = this.newthumbArr.concat(result.data);

        return false;
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },
    del2(e) {
      this.filelist2.map(async (item, index) => {
        if (index == e.index) {
          // 删除数组中的某一项

          let data = {
            serid: this.serid,
            url: e.file.url,
          };
          var result = await this.$u.api.product.delimagelist(data);

          if (result.code) {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 500,
              complete: () => {
                this.filelist2.splice(e.index, index);

                // 图片还剩余一张的时候清空
                if (index == 0 && e.index == 0) {
                  this.filelist2 = [];
                }
              },
            });
            return false;
          } else {
            this.$refs.notice.show({
              type: "warning",
              message: result.msg,
              duration: 500,
              complete: () => {
                this.filelist2 = [];
              },
            });
          }
        }
      });
    },
    async del1(e) {
      let data = {
        adminid: this.auth.id,
        serid: this.serid,
        url: e.file.url,
      };

      var result = await this.$u.api.product.delsquareImage(data);

      if (result.code) {
        this.$refs.notice.show({
          type: "success",
          message: result.msg,
          duration: 500,
          complete: () => {
            this.filelist1 = [];
            this.service.Squareimage_text = "";
          },
        });
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
          duration: 1000,
        });
      }
    },
    async del(e) {
      let data = {
        adminid: this.auth.id,
        serid: this.serid,
        url: e.file.url,
      };

      var result = await this.$u.api.product.delimage(data);

      if (result.code) {
        this.$refs.notice.show({
          type: "success",
          message: result.msg,
          duration: 500,
          complete: () => {
            this.filelist = [];
            this.service.image_text = "";
          },
        });
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
          duration: 1000,
          complete: () => {
            this.filelist = [];
            this.service.image_text = "";
          },
        });
      }
    },

    sellcolumnSelect(e) {
      this.service.sellcolumn_text = e.name;
      this.service.sellcolumn = e.sellcolumn;
    },

    product() {
      let urlArray = this.filelist2.map((item) => item.url);

      this.$refs.product
        .validate()
        .then(async () => {
          var data = {
            id: this.serid,
            stoid: this.service.stoid,
            title: this.service.title,
            free: this.service.free,
            leveid:this.service.leveid,
            adminid: this.auth.id,
            image: this.service.image_text,
            squareImage: this.service.Squareimage_text,
            imagelist: urlArray,
            content: this.service.content,
            typeid: this.service.typeid,
            sellcolumn: this.service.sellcolumn,
            levelprice: this.service.levelprice,
            newthumbArr: this.newthumbArr,
          };

          let result = await this.$u.api.product.servicesedit(data);

          if (result.code) {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 1000,
              complete: () => {
                //返回上一个界面
                uni.$u.route({
                  type: "reLaunch",
                  url: "/pagesC/product/gsservices/servicelist/list",
                  params: {
                    typeid: this.typeid,
                  },
                });
              },
            });
          } else {
            this.$refs.notice.show({
              type: "error",
              message: result.msg,
              duration: 2000,
            });
          }
        })
        .catch(() => {
          uni.$u.toast("效验失败");
        });
    },
    async getlevelindex() {
      let result = await this.$u.api.business.leveldata();
      if (result.code) {
        this.leveldata = result.data;
      }
    },
    async storelist() {
      let data = {
        adminid: this.auth.id,
        stoid: this.auth.stoid,
      };
      let result = await this.$u.api.product.storelist(data);

      if (result.code) {
        this.stolist = result.data;
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
      }
    },
    async typedata() {
      let data = {
        adminid: this.auth.id,
        stoid: this.auth.stoid,
      };
      let result = await this.$u.api.product.typelist(data);

      if (result.code) {
        this.typelist = result.data;
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
      }
    },

    storeSelect(e) {
      this.service.store.name = e.name;
      this.service.stoid = e.id;
      this.showstore = false;
    },

    opentype() {
      this.showtype = true;
    },
    closetype() {
      this.showtype = false;
    },
    typeSelect(e) {
      this.service.type_text = e.name;
      this.service.typeid = e.id;
      this.showtype = false;
    },
    levelSelect(e) {
      this.service.level.name = e.name;
      this.service.leveid = e.id;
      this.service.level.zhekou = e.zhekou
      this.showlevel = false;
    },

    async list() {
      let data = {
        serid: this.serid,
      };
      let result = await this.$u.api.product.servicesinfo(data);
      if (result.code) {
        this.service = result.data;

        if (this.service.image_text) {
          // 把一维数组循环出来然后组装一个自己想要的结构
          this.filelist = [{ url: this.service.image_text }];
        }
        if (this.service.Squareimage_text) {
          // 把一维数组循环出来然后组装一个自己想要的结构
          this.filelist1 = [{ url: this.service.Squareimage_text }];
        }
        if (this.service.imagelist_text) {
          // 把一维数组循环出来然后组装一个自己想要的结构
          this.filelist2 = this.service.imagelist_text.map((item) => {
            return {
              url: item,
            };
          });
        }
      } else {
        this.$refs.notice.show({
          type: "warning",
          message: result.msg,
        });
      }
    },
  },
};
</script>
  
<style >
.content {
  padding: 20px;
}

.container {
  position: relative;
  height: 100%;
  margin: 0 50rpx;
  box-sizing: border-box;
}

.avatar {
  text-align: center;
}

.branktypename {
  text-align: center;
}
.u-avatar {
  margin: 80rpx auto 40rpx;
}

.xcx {
  width: 200rpx;
  height: 200rpx;
  margin: 80rpx auto 40rpx;
  border-radius: 100%;
  overflow: hidden;
}

.nickname {
  font-size: 14px;
  text-align: center;
}

.title {
  text-align: center;
  margin: 40rpx 0;
  font-size: 14rpx;
}

.avatar .u-upload {
  justify-content: center;
  align-items: center;
  margin: 3em auto;
}

.vedio .u-upload {
  justify-content: center;
  align-items: center;
  margin: 0.3em auto;
}

.vedio {
  text-align: center;
}

.u-vedio {
  margin: 80rpx auto 40rpx;
}
</style>
  